<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市场景动画</title>
</head>

<style>
    @keyframes moveballon {
        0%{ right: 0%;}
        10%{right: 20%;transform: rotate(45deg)}
        20%{right: 40%;transform: rotate(75deg)}
        30%{right: 60%;transform: rotate(80deg)}
        40%{right: 80%;transform: rotate(75deg)}
        50%{right: 120%;transform: rotate(45deg)}
        60%{right: 100%;transform: rotate(0deg)}
        70%{right: 80%;transform: rotate(45deg)}
        80%{right: 60%;transform: rotate(75deg)}
        90%{right: 40%;transform: rotate(80deg)}
        100%{right: -20%;transform: rotate(0deg)}
    }
    @keyframes bgcolor {
      0%{
        background-color: red;
      }
       33%{
           background-color: blue;
        }
       66%{
           background-color: black;
        }
       100%{
           background-color: yellow;
        }
    }
    #divall{
        height: 600px;
        border: 1px solid red;
        position: relative;
        background-color: #DDF5F7;
        animation: bgcolor 12s linear infinite;
    }
    #ceng1{
        height: 300px;
        width: 100%;
        background-image: url("img/groundFront.png");
        background-position: 250px;

        position: absolute;
        bottom: 0px;
        z-index: 999;
    }
    #ceng2{
        height: 299px;
        width: 100%;
        background-image: url("img/groundMid.png");
        background-position:-50px;

        position: absolute;
        bottom: 0px;
        z-index: 888;
    }
    #ceng3{
        height: 280px;
        width: 100%;
        background-image: url("img/groundBack.png");
        position: absolute;
        bottom: 0px;
        z-index: 777;
    }
    #ceng4{
        height: 147px;
        width: 100%;
        background-image: url("img/skyline.png");
        position: absolute;
        bottom: 150px;
        z-index: 666;
    }
    #ceng5{
        height: 200px;
        width: 100%;
        background-image: url("img/beans.png");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 180px;
        left: 50%;
        z-index: 555;
    }
    #ceng6{
        height: 285px;
        width: 100%;
        background-image: url("img/Planetarium.png");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 120px;
        left: 65%;
        z-index: 800;
    }
    #ceng7{
        height: 285px;
        width: 100%;
        background-image: url("img/Glockenspiel.png");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 120px;
        left: 38%;
        z-index: 800;
    }
    #ceng8{
        height: 285px;
        width: 100%;
        background-image: url("img/dowEventCenter.png");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 70px;
        left: 2%;
        z-index: 800;
    }
    #ceng9{
        height: 370px;
        width: 100%;
        background-image: url("img/friendshipShell.png");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 100px;
        left: 18%;
        z-index: 900;
    }
    #ceng10{
        height: 227px;
        width: 157px;
        background-image: url("img/balloon.png");
        background-repeat: no-repeat;
        position: absolute;
        right: -200px;
        z-index: 900;
        animation: moveballon 12s linear infinite;
    }
</style>
<body>

<div id="divall">

    <div id="ceng1">

    </div>
    <div id="ceng2">

    </div>
    <div id="ceng3">

    </div>
    <div id="ceng4">

    </div>
    <div id="ceng5">

    </div>
    <div id="ceng6">

    </div>
    <div id="ceng7">

    </div>
    <div id="ceng8">

    </div>
    <div id="ceng9">

    </div>
    <div id="ceng10">

    </div>
</div>
</body>
</html>